<template>
    <view class="css-top">
        <view v-if="data.InvoiceState === 2">
            <view class="css-fpxx">驳回理由</view>
            <view class="css-failtip">{{ data.RejectedContent }}</view>
            <!-- 边框内凹 -->
            <view class="top-circle">
                <view class="top-left-circle1 circle-view"></view>
                <view class="top-right-circle1 circle-view"></view>
            </view>
            <view class="bottom-circle">
                <view class="bottom-left-circle1 circle-view"></view>
                <view class="bottom-right-circle1 circle-view"></view>
            </view>
        </view>

        <view class="css-fpxx">发票信息</view>
        <view class="css-cell" >
            <view class="flex">
                <view class="lett-txt1">发票金额</view>
                <text class="lett-txt2">{{ data.InvoicePrice }}</text>
            </view>
        </view>
        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">{{ data.OrderInvoiceHeadType == 1 ? "抬头名称" : "企业名称" }}</view>
                <text class="lett-txt2">{{ data.Name }}</text>
            </view>
        </view>
        <view v-if="data.OrderInvoiceHeadType == 2">
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">识别号</view>
                    <text class="lett-txt2">{{ data.Name }}</text>
                </view>
            </view>
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">开户银行</view>
                    <text class="lett-txt2">{{ data.Name }}</text>
                </view>
            </view>
        </view>

        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">发票类型</view>
                <text class="lett-txt2">电子普通发票</text>
            </view>
        </view>
        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">发票内容</view>
                <text class="lett-txt2">商品明细</text>
            </view>
        </view>
        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">手机号码</view>
                <text class="lett-txt2">{{ data.Phone }}</text>
            </view>
        </view>
        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">申请时间</view>
                <text class="lett-txt2">{{ data.ModifyTime }}</text>
            </view>
        </view>
        <view v-if="data.InvoiceState === 1">
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">开票时间</view>
                    <text class="lett-txt2">{{ data.MakeInvoiceTime }}</text>
                </view>
            </view>
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">审核备注</view>
                    <text class="lett-txt2">{{ data.RejectedContent || "" }}</text>
                </view>
            </view>
        </view>

        <!-- 审核通过 -->
        <!--        <view v-if="data.InvoiceState === 1">
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">发票代码</view>
                    <text class="lett-txt2">111</text>
                </view>
            </view>
            <view class="css-cell">
                <view class="flex">
                    <view class="lett-txt1">发票号码</view>
                    <text class="lett-txt2">1111</text>
                </view>
            </view>
        </view> -->
        <!-- 边框内凹 -->
        <view class="top-circle">
            <view class="top-left-circle1 circle-view"></view>
            <view class="top-right-circle1 circle-view"></view>
        </view>
        <view class="bottom-circle">
            <view class="bottom-left-circle1 circle-view"></view>
            <view class="bottom-right-circle1 circle-view"></view>
        </view>

        <view class="css-fpxx">接收方式</view>
        <view class="css-cell">
            <view class="flex">
                <view class="lett-txt1">电子发票</view>
                <text class="lett-txt2">{{ data.EMail }}</text>
            </view>
        </view>
        <view class="css-cellimg" v-if="data.InvoiceState === 1 && data.Images">
            <view class="css-imgflex">
                <view class="lett-txt1">发票预览</view>
				<view class="css-imglist">
					<view v-for="(item, index) in data.Images.split(',')" :key="index" >
					    <image
					        :src="easyGetImgUrl(item)"
					        class="css-img"
					        :data-src="easyGetImgUrl(item)"
							mode="aspectFill"
					        @tap="previewImage"></image>
					</view>
				</view>
          
            </view>
        </view>
		<view class="css-cell" style="height: auto;">
		    <view class="flex">
		        <view class="lett-txt1">发票附件</view>
				<view style="flex: 1;">
					<view class="lett-txt2 colorblue" @click="downLoadPDF(item)" v-for="(item, index) in data.AppendixArray" :key="index">附件{{index+1}}</view>
				</view>
		    </view>
		</view>
    </view>
</template>

<script>
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        goOrderDetail() {
            this.easyGoTo(`/pages_shop/packet/order/orderDetail?id=${this.data.OrderId}`)
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            let list = this.data.Images.split(",")
            list.forEach((e, index, arr) => {
                arr[index] = this.easyGetImgUrl(e)
            })

            uni.previewImage({
                current: current,
                urls: list,
            })
        },
		//下载PDF文件 
		downLoadPDF(item){
			let ImageDomain = storage.getCache("ImageDomain")
			let url = ImageDomain+item
				uni.downloadFile({
			   		url: url, //文件链接
			   		success: function(res) {
			   			console.log(res)
			   			//statusCode状态为200表示请求成功，tempFIlePath临时路径
			   			if (res.statusCode == 200) {
			   			console.log("ccc", res.tempFilePath);
			   				//保存到本地
			   				uni.saveFile({
			   					tempFilePath: res.tempFilePath,
			   					success: function(res) {
			   					//res.savedFilePath文件的保存路径
			   					//保存成功并打开文件
			   					uni.openDocument({
			   						filePath: res.savedFilePath,
			   						success: (res) => console.log('成功打开文档')})
			   					},
			   					fail() {
			   						console.log('打开失败')
			   					}
			   				})
			   			}
			   		},
			   		fail() {
			   			console.log('下载失败')
			   		}
				})
			

	},
	
}
}
</script>

<style lang="scss">
.css-top {
    background-image: linear-gradient(#fffefe, #ffffff);
    margin: 0 18rpx;
    padding-left: 32rpx;
    padding-bottom: 30rpx;
    position: relative;
    &:after {
        content: "";
        position: absolute;
        right: 0;
        left: -0%;
        top: 100%;
        z-index: 10;
        display: block;
        height: 20px;
        background-size: 30px 100%;
        background-image: linear-gradient(135deg, #ffffff 5%, transparent 25%),
            linear-gradient(225deg, #ffffff 25%, transparent 25%);
        background-position: 0 0;
    }
}

.css-fpxx {
    font-size: 32rpx;
    font-weight: Medium;
    padding-top: 28rpx;
    padding-bottom: 20rpx;
}
.css-cell {
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    line-height: 60rpx;
    padding-right: 32rpx;
}
.lett-txt1 {
    color: $app-color-text-tip;
    font-size: 28rpx;
    width: 120rpx;
}
.lett-txt2 {
    color: $app-color-text-mian;
    font-size: 28rpx;
    padding-left: 48rpx;
}
.colorblue{
	color: blue;
}
.right-txt {
    color: $app-color-text-tip;
    font-size: 24rpx;
}

.css-failtip {
    color: $color-red;
    font-size: $size-24;
    height: 60rpx;
    line-height: 60rpx;
}
.css-cellimg {
    display: flex;
    margin-top: 10rpx;
}
.css-imgflex {
    display: iinline;
}
.css-imglist {
    margin-left: 62px;
    display: flex;
	flex-wrap: wrap;
}
.css-img {
    width: 160rpx;
    height: 160rpx;
    margin-left: 48rpx;
    margin-bottom: 15px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
}

.top-circle {
    margin-top: 10rpx;
    margin-left: -32rpx;
    height: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .top-left-circle1 {
        border-top-right-radius: 20rpx;
        background: #f7f7f7;
        border-bottom: 1rpx solid #f7f7f7;
    }
    .top-right-circle1 {
        border-top-left-radius: 20rpx;
        background: #f7f7f7;
        border-bottom: 1rpx solid #f7f7f7;
    }
    border-bottom: 1rpx solid #f7f7f7;
}
.bottom-circle {
    margin-left: -32rpx;
    height: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .bottom-left-circle1 {
        border-bottom-right-radius: 20rpx;
        background: #f7f7f7;
    }
    .bottom-right-circle1 {
        border-bottom-left-radius: 20rpx;
        background: #f7f7f7;
    }
}
.circle-view {
    // 圆的大小
    height: 20rpx;
    width: 20rpx;
}
</style>
